<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        #a {
            width: 300px;
            height: 300px;
            background-color: rosybrown;
        }

        #b {
            width: 200px;
            height: 200px;
            background-color: firebrick;
            z-index: 2;

        }

        #c {
            width: 100px;
            height: 100px;
            background-color: gold;
            z-index: 1;

        }
    </style>
</head>

<body>
    <div>
        <button id="btn">点我</button>
        <h1 class="hid" id="text" aa='hhh'>hahahah </h1>
        <button id="btn1">点我呀</button>
        <button id="btn2" @click='clickii'>点我呀</button>

    </div>
    <div id='a'>
        a
        <div id="b">b
            <div id="c">c</div>
        </div>
    </div>
    <script>
        //事件冒泡，点击子元素，父亲元素事件也被触发（事件从底层向上传播）
        var diva = document.getElementById('a')
        var divb = document.getElementById('b')
        var divc = document.getElementById('c')
        diva.onclick = function () {
            console.log('a') //点击输出a
        }
        divb.onclick = function () {
            console.log('b') //点击输出 b a
        }
        divc.onclick = function (e) {
            console.log('c') //点击输出 c b a
            e.stopPropagaion()
        }

        var h1 = document.getElementById('text')
        var btn = document.getElementById('btn')
        btn.onclick = function () {
            console.log(h1.className);
            console.log(h1.id);
            console.log(h1.aa)
            console.log(h1.ddd = 'hahahh')
            var p1 = document.createElement('p')
            p1.innerHTML = '我是品牌拍摄'
            document.body.appendChild(p1);
        }

        // 同一个事件绑定不同方法,浏览器兼容
        // //判断浏览器支持不支持addEventListener这个语法
        // if (btn1.addEventListener) { //支持该语法
        //     // ie8以及之前不支持一下方法
        //     var btn1 = document.getElementById('btn1')
        //     btn1.addEventListener('click', function () {
        //         console.log(111)
        //     }, false)
        //     btn1.addEventListener('click', function () {
        //         console.log(222)
        //     }, true)
        // } else {
        //     //需要跨浏览器处理
        //     btn1.attachEvent('click', function () { //不支持事件冒泡捕获
        //         console.log(111)
        //     })
        // }

        //事件 事件源 事件函数
        // var btn2 = document.getElementById('btn2')
        // btn2.onclick = 
        function clickii(e) {
            e = e || window.event
            console.log(e.type);

        }
    </script>

</body>

</html>